<template>
  <div class="index">
    <canvas
      id="canvas"
      canvas-id="canvas"
      style="width: 300px; height: 300px"
    ></canvas>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import DrawPoster from 'uni-draw-poster';
export default Vue.extend({
  async onReady() {
    // 创建绘制工具
    const dp = await DrawPoster.build('canvas');
    dp.canvas.width = 300;
    dp.canvas.height = 300;

    // 背景与图片框架的绘制
    dp.draw(async (ctx) => {
      await ctx.drawImage('...', 123, 123, 123, 123);
      await ctx.drawImage('...', 123, 123, 123, 123);
    });
    // 顶部字体绘制
    dp.draw(async (ctx) => {
      // 默认样式
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px sans-serif';

      // 名称绘制
      ctx.fillText('...', 12 * 2, 38);
      ctx.restore();
      // 标签和手机号绘制
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px sans-serif';
      ctx.fillText('...', 12 * 2, 38);
      ctx.restore();
      // 地址绘制
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px sans-serif';
      ctx.fillText('...', 12 * 2, 38);
      ctx.restore();
      // 名片字段
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px sans-serif';
      ctx.fillText('...', 12 * 2, 38);
      ctx.restore();
    });
    // 卡片字体绘制
    dp.draw(async (ctx) => {
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px sans-serif';
      ctx.fillText('...', 12 * 2, 38);
      ctx.restore();
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px sans-serif';
      ctx.fillText('...', 12 * 2, 38);
      ctx.restore();
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px sans-serif';
      ctx.fillText('...', 12 * 2, 38);
      ctx.restore();
    });

    // 执行绘制任务
    console.log('绘制情况: ', await dp.awaitCreate());
    // 创建本地图片
    console.log('创建地址: ', await dp.createImagePath());
  },
});
</script>

<style lang="scss">
page,
.index {
  height: 100%;
}
.index {
  position: relative;
  background: rgba($color: grey, $alpha: 0.2);
}
canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
